<template>
    <view class="wo-page">
        <view class="wo-page-body u-padding-20">
            <!--个人信息-->
            <view class="wo-user u-padding-20 u-margin-bottom-20">
                <!--用户头像-->
                <u-avatar class="wo-user-avatar" :src="dataDetail.user.avatar || ''" size="100"></u-avatar>
                <!--用户信息-->
                <view class="wo-user-info u-padding-left-20">
                    <view class="wo-user-name u-line-1">
                        <text>{{ dataDetail.name || '暂未登陆' }}</text>
                    </view>
                    <view class="wo-user-time u-line-1">
                        <text v-if="dataDetail.create_time">{{ $dayjs.unix(dataDetail.create_time).format('YYYY/MM/DD HH:mm') }}</text>
                    </view>
                </view>
                <!--操作区域-->
                <view class="wo-user-action" v-if="dataDetail.examine == 2"><u-button type="primary" size="mini" shape="circle">审核中</u-button></view>
            </view>
            <view class="wo-manage-area" v-if="dataDetail.examine == 1">
                <u-tabs :list="tabList" :is-scroll="false" :current="tabIndex" @change="tabChangeFunc"></u-tabs>
                <view v-show="tabIndex == 0">
                    <view class="wo-list u-padding-10" v-if="personList.total">
                        <!--统计信息-->
                        <view class="wo-count u-padding-20 u-margin-bottom-20 u-flex u-border-bottom">
                            <view class="u-flex-6">
                                <view class="wo-count-data">
                                    <text>{{personList.total||0}}</text>
                                </view>
                                <view class="wo-count-label">
                                    <text>总计</text>
                                </view>
                            </view>
                            <u-line class="u-line" direction="col" length="50"></u-line>
                            <view class="u-flex-6">
                                <view class="wo-count-data">
                                    <text>{{personList.count_today||0}}</text>
                                </view>
                                <view class="wo-count-label">
                                    <text>今日</text>
                                </view>
                            </view>
                        </view>
                        <view class="wo-item u-padding-10" v-for="(data_v, data_k) in personList.items" :key="data_k">
                            <view class="wo-data u-border u-padding-20">
                                <view class="wo-data-info">
                                    <view class="wo-data-name u-line-1">
                                        <text>{{ data_v.name }}</text>
                                    </view>
                                    <view class="u-line-1">
                                        <text>证件号：{{ data_v.id_number }}</text>
                                    </view>
                                </view>
                                <!--
                                <view class="wo-data-action"><u-button type="primary" size="mini" shape="circle" @click="$u.route('pages/person/detail', { id: data_v.id })">查看详情</u-button></view>
                                -->
                            </view>
                        </view>
                        <u-loadmore :status="personListStatus" @loadmore="personListMoreFunc"></u-loadmore>
                        <!--
                        <view class="u-padding-20">
                            <u-button type="warning" shape="circle" @click="personExportFunc">导出数据</u-button>
                        </view>
                        -->
                    </view>
                    <u-empty v-else text="暂无数据" mode="list"></u-empty>
                </view>
                <view v-show="tabIndex == 1">
                    <view class="wo-list u-padding-10" v-if="unitList.total">
                        <!--统计信息-->
                        <view class="wo-count u-padding-20 u-margin-bottom-20 u-flex u-border-bottom">
                            <view class="u-flex-6">
                                <view class="wo-count-data">
                                    <text>{{unitList.total||0}}</text>
                                </view>
                                <view class="wo-count-label">
                                    <text>单位数</text>
                                </view>
                            </view>
                            <u-line class="u-line" direction="col" length="50"></u-line>
                            <view class="u-flex-6">
                                <view class="wo-count-data">
                                    <text>{{unitList.count_person||0}}</text>
                                </view>
                                <view class="wo-count-label">
                                    <text>总人数</text>
                                </view>
                            </view>
                        </view>
                        <view class="wo-item u-padding-10" v-for="(data_v, data_k) in unitList.items" :key="data_k">
                            <view class="wo-data u-border u-padding-20">
                                <view class="wo-data-info">
                                    <view class="wo-data-name u-line-1">
                                        <text>{{ data_v.name }}</text>
                                    </view>
                                    <view class="u-line-1">
                                        <text>地址：{{ data_v.address }}</text>
                                    </view>
                                </view>
                                <!--
                                <view class="wo-data-action"><u-button type="primary" size="mini" shape="circle" @click="$u.route('pages/unit/detail', { id: data_v.id })">查看详情</u-button></view>
                                -->
                            </view>
                        </view>
                        <u-loadmore :status="unitListStatus" @loadmore="unitListMoreFunc"></u-loadmore>
                    </view>
                    <u-empty v-else text="暂无数据" mode="list"></u-empty>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tabList: [
                {
                    name: '个人登记'
                },
                {
                    name: '单位登记'
                }
            ],
            tabIndex: 0,
            dataDetail: {},
            personList: {},
            unitList: {}
        };
    },
    methods: {
        // 页面初始化
        async initPageFunc(option) {
            let dataDetail = await this.$u.api.manageDetail();
            if (!dataDetail) {
                return false;
            }
            this.dataDetail = dataDetail;
            if (this.dataDetail.examine == 1) {
                let personList = await this.personListFunc();
                if (personList) {
                    this.personList = personList;
                }
                let unitList = await this.unitListFunc();
                if (unitList) {
                    this.unitList = unitList;
                }
            }
            this.pageInit = true;
        },
        tabChangeFunc(index) {
            this.tabIndex = index;
        },
        // 个人登记
        async personListFunc(params) {
            params = params || {};
            this.personListStatus = 'loading';
            let personList = await this.$u.api.managePlanPersonList(params);
            if (!personList) {
                return false;
            }
            this.personListStatus = 'loadmore';
            return personList;
        },
        async personListMoreFunc() {
            if (this.personList.items.length >= this.personList.total) {
                this.personListStatus = 'nomore';
                return false;
            }
            let result = await this.personListFunc({
                page: ++this.personList.page_current
            });
            if (result) {
                this.personList.items = this.personList.items.concat(result.items);
            }
        },
        async personExportFunc() {
            console.log('数据导出');
        },
        // 单位登记
        async unitListFunc(params) {
            params = params || {};
            this.unitListStatus = 'loading';
            let unitList = await this.$u.api.managePlanUnitList(params);
            if (!unitList) {
                return false;
            }
            this.unitListStatus = 'loadmore';
            return unitList;
        },
        async unitListMoreFunc() {
            if (this.unitList.items.length >= this.unitList.total) {
                this.unitListStatus = 'nomore';
                return false;
            }
            let result = await this.unitListFunc({
                page: ++this.unitList.page_current
            });
            if (result) {
                this.unitList.items = this.unitList.items.concat(result.items);
            }
        }
    }
};
</script>

<style lang="scss">
.wo-page-body {
}
.wo-user {
    display: flex;
    background-color: #fff;
    border-radius: uni-unit(10px);
    &::after {
        border-radius: uni-unit(10px);
    }
    .wo-user-info {
        flex: 1;
        line-height: uni-unit(20px);
        font-size: uni-unit(12px);
        color: $uni-text-color-grey;
        overflow: hidden;
        .wo-user-name {
            height: uni-unit(30px);
            line-height: uni-unit(30px);
            font-size: uni-unit(16px);
            color: $uni-text-color;
        }
        .wo-user-time {
        }
    }
    .wo-user-action {
        width: uni-unit(70px);
        display: flex;
        align-items: center;
    }
}
.wo-manage-area {
    background-color: #fff;
    border-radius: uni-unit(10px);
    overflow: hidden;
}
 .wo-data {
     display: flex;
     border-radius: uni-unit(10px);
     &::after {
         border-radius: uni-unit(5px);
     }
     .wo-data-info {
         flex: 1;
         line-height: uni-unit(20px);
         font-size: uni-unit(12px);
         color: $uni-text-color-grey;
         overflow: hidden;
         .wo-data-name {
             height: uni-unit(30px);
             line-height: uni-unit(30px);
             font-size: uni-unit(16px);
             color: $uni-text-color;
         }
     }
     .wo-data-action {
         width: uni-unit(70px);
         display: flex;
         align-items: center;
     }
 }
 .wo-count {
     font-size: uni-unit(12px);
     line-height: uni-unit(20px);
     color: $uni-text-color-grey;
     text-align: center;
     .wo-count-data {
         font-size: uni-unit(18px);
         line-height: uni-unit(30px);
         color: $uni-text-color;
     }
 }
</style>
